<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-input v-model="listQuery.userPhone" placeholder="手机号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.orderNo" placeholder="订单号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" /> -->

      <el-select
        v-model="listQuery.loanStatus"
        placeholder="订单状态"
        clearable
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >


        <el-option style="width: auto" label="前筛拒绝" :value="'PREVIOUS_PASSED'">前筛通过</el-option>
        <el-option style="width: auto" label="前筛拒绝" :value="'PREVIOUS_REJECT'">前筛拒绝</el-option>
        <el-option style="width: auto" label="准入通过" :value="'PUNG_PASSED'">准入通过</el-option>
        <el-option style="width: auto" label="准入失败" :value="'PUNG_REJECT'">准入失败</el-option>


        <el-option style="width: auto" label="授信表单提交成功" :value="'COMMIT_FORM_SUCCESS'">授信表单提交成功</el-option>
        <el-option style="width: auto" label="授信表单提交失败" :value="'COMMIT_FORM_FAIL'">授信表单提交失败</el-option>
        <el-option style="width: auto" label="授信成功" :value="'COMMIT_FORM_PASSED'">授信成功</el-option>
        <el-option style="width: auto" label="授信失败" :value="'COMMIT_FORM_REJECT'">授信失败</el-option>
        <el-option style="width: auto" label="放款审核失败" :value="'LEND_CHECK_REJECT'">放款审核失败</el-option>
        <el-option style="width: auto" label="放款审核成功" :value="'LEND_CHECK_PASSED'">放款审核成功</el-option>
        <el-option style="width: auto" label="放款失败" :value="'LEND_FAIL'">放款失败</el-option>
        <el-option style="width: auto" label="放款成功" :value="'LEND_FINISHED'">放款成功</el-option>
        <el-option style="width: auto" label="还款成功" :value="'REPAYMENT_FINISHED'">还款成功</el-option>
      </el-select>
      <el-date-picker
        v-model="times"
        class="filter-item"
        clearable
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 250px;"
        type="daterange"
        value-format="yyyy-MM-dd"
      />

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-download" @click="handleExport">
        导出
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="订单编号" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.loanId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" min-width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.userPhone }}</span>
        </template>
      </el-table-column>
      <!--
        "PREVIOUS_PASSED";//前筛通过
        "PREVIOUS_REJECT";//前筛拒绝
        "PUNG_PASSED";//准入通过
        "PUNG_REJECT";//准入失败
        "COMMIT_FORM_SUCCESS";//授信表单提交成功
        "COMMIT_FORM_FAIL";//授信表单提交成功
        "COMMIT_FORM_PASSED";//授信成功
        "COMMIT_FORM_REJECT";//授信失败
        "BIND_CARD_PASSED";//绑卡通过
        "BIND_CARD_REJECT";//绑卡失败
        "LEND_CHECK_PASSED";//放款审核通过
        "LEND_CHECK_REJECT";//放款审核失败
        "LEND_FINISHED";//放款成功
        "LEND_FAIL";//放款失败
        "REPAYMENT_FINISHED";//还款成功 -->
      <el-table-column label="订单状态" class-name="status-col" min-width="80">
        <template slot-scope="{row}">
          <el-tag v-if="row.loanStatus === 'PREVIOUS_REJECT'" type="danger">前筛拒绝</el-tag>
          <el-tag v-if="row.loanStatus === 'PUNG_PASSED'" type="success">准入通过</el-tag>
          <el-tag v-if="row.loanStatus === 'PUNG_REJECT'" type="danger">准入失败</el-tag>
          <el-tag v-if="row.loanStatus === 'COMMIT_FORM_SUCCESS'" type="success">授信表单提交成功</el-tag>
          <el-tag v-if="row.loanStatus === 'COMMIT_FORM_FAIL'" type="danger">授信表单提交失败</el-tag>
          <el-tag v-if="row.loanStatus === 'COMMIT_FORM_PASSED'" type="success">授信成功</el-tag>
          <el-tag v-if="row.loanStatus === 'COMMIT_FORM_REJECT'" type="danger">授信失败</el-tag>
          <el-tag v-if="row.loanStatus === 'LEND_CHECK_REJECT'" type="danger">放款审核失败</el-tag>
          <el-tag v-if="row.loanStatus === 'LEND_CHECK_PASSED'" type="success">放款审核成功</el-tag>
          <el-tag v-if="row.loanStatus === 'LEND_FAIL'" type="danger">放款失败</el-tag>
          <el-tag v-if="row.loanStatus === 'LEND_FINISHED'" type="success">放款成功</el-tag>
          <el-tag v-if="row.loanStatus === 'REPAYMENT_FINISHED'" type="primary">还款成功</el-tag>
        </template>
      </el-table-column>




      <el-table-column label="被拒原因" min-width="200" align="center">
        <template slot-scope="{row}">
          <span>{{ row.requestContent }}</span>
        </template>
      </el-table-column>

      <el-table-column label="借款金额" min-width="80" align="center">
        <template slot-scope="{row}">
          <span>{{ row.amount }}</span>
        </template>
      </el-table-column>


      <el-table-column label="借款时间" min-width="120" align="center">
        <template slot-scope="{row}">
          <span>{{ row.loanTime }}</span>
        </template>
      </el-table-column>




    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getOrderList"
    />

  </div>
</template>

<script>
import { getPhoneUserDetail, getChannelIdAndNick } from '@/api/user'
import { getOrderList, exportLoanInfoList } from '@/api/moneyCan'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
export default {
  name: 'SmallWin',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableData: [],
      total: 0,
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 10,
        phone: ''
      },
      times: [],
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '用户详情',
        create: '新增'
      },
      dialogPvVisible: false,
      downloadLoading: false,
      listLoading: false,
      optionsCopy: [],
      options: [],
      value: ''
    }
  },
  created() {
    var userId = this.$route.query.userId
    if (userId) {
      this.listQuery.userId = userId
    }
    this.getOrderList(this.listQuery)

    // this.getChannelIdAndNick()
  },
  methods: {
    handleExport() {
      exportLoanInfoList(this.listQuery).then(res => {
        if (res.data.code === 200) {
          window.location.href = res.data.data
        } else {
          this.$notify({
            title: '错误',
            message: '导出失败，请联系后台技术人员',
            type: 'fail',
            duration: 2000
          })
        }
      })
    },
    atest(id) {
      const routeUrl = this.$router.resolve({
        path: '/map',
        query: { id: id }
      })
      window.open(routeUrl.href, '_blank')
    },
    dataFilter(val) {
      this.value = val
      if (val) { // val存在
        this.options = this.optionsCopy.filter((item) => {
          if (!!~item.channel_name.indexOf(val) || !!~item.channel_name.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        })
      } else { // val为空时，还原数组
        this.options = this.optionsCopy
      }
    },
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick(this.listQuery)
      res.data.data.forEach(element => {
        if (element.channel_name !== null) {
          this.optionsCopy.push(element)
          this.options.push(element)
        }
      })
    },
    // 获取用户列表
    async getOrderList(listQuery) {
      this.listLoading = true
      const res = await getOrderList(this.listQuery)
      this.tableData = res.data.data.records
      this.total = res.data.data.total
      this.listLoading = false
    },
    handleFilter() {
      this.listQuery.current = 1
      if (this.times == null) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else if (this.times.length === 0) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else {
        this.listQuery.endTime = this.times[1]
        this.listQuery.startTime = this.times[0]
      }
      this.getOrderList(this.listQuery)
    },
    async handleUpdate(row) {
      const res = await getPhoneUserDetail({ 'userId': row.userId })
      if (res.data.data === null) {
        this.$notify({
          title: '错误',
          message: '获取失败',
          type: 'fail',
          duration: 2000
        })
      }
      this.userBaseInfo = res.data.data
      // this.userBaseInfo.loanApps = [{ appName: '1', gmtDatetime: '2323' }, { appName: '2', gmtDatetime: '22323' }]
      this.temp = Object.assign({}, row) // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    }
  }
}
</script>

<style scoped>
.pic{
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color:rgb(35, 248, 124)
}
.fail{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
.info{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}
.info-name{
  margin-left: 50px;
  margin-top: 10px;
  color:rgb(0, 0, 0);
}
.title{
  margin-top: 0px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
  border-bottom: 1px dashed #304156;
  padding-bottom: 10px;
}
.box{
  margin-top: 10px;
  width: 100%;
  border: solid #304156 1px;
  padding: 20px 10px;
  border-radius: 10px;
}
.nick{
  font-size: 30px;
  font-weight: 600;
  border-bottom: solid #d6d6d6 2px;
  padding-bottom: 10px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
